<template>
	<t-drawer :title="title" placement="right" :width="640"
		:visible="visible" :confirmLoading="loading" destroyOnClose
        @close="() => { $emit('cancel') }">
		<a-spin :spinning="loading">
			<tool-bar
                :showDivisionBar="false"
		    >
                <template slot="toolBtn" slot-scope="scope">
                    <a-button
                        class="cu-btn-primary"
                        icon="plus"
                        @click="handleAdd"
                    >新增</a-button>
                </template>
            </tool-bar>
            <div class="margin-top-xs" style="padding-bottom: 45px;">
                <a-table
                    :columns="columns"
                    :data-source="dataSource"
                    :scroll="scrollXY"
                    :pagination="false"
                >
                    <span slot="renderSerial" slot-scope="text, record, index">
                        {{ index + 1 }}
                    </span>
                    <!-- <span slot="renderSubTableRule" slot-scope="text, record, index">
                        {{ text | subTableRuleFilter }}
                    </span>
                    <span slot="renderConditionalSymbol" slot-scope="text, record, index">
                        {{ text | conditionalSymbolFilter }}
                    </span> -->
                    <span slot="renderAdvancedMatch" slot-scope="text, record, index">
                        {{ text | advancedMatchFilter }}
                    </span>
                    <span slot="renderConditionalContent" slot-scope="text, record, index">
                        {{ text | conditionalContentFilter }}
                    </span>
                    <span slot="renderPermissionStatus" slot-scope="text, record, index">
                        <a-tag :color="text == '1' ? 'green' : 'red'">
                            {{ text == '1' ? '启用' : '禁用' }}
                        </a-tag>
                    </span>
                    <span slot="renderAction" slot-scope="text, record">
                        <a @click="handleEdit(record)">编辑</a>
                        <span class="action-margin"></span>
                        <a @click="handleSub(record)" class="action-delete">删除</a>
                    </span>
                </a-table>
            </div>
		</a-spin>
		<div :style="{
				background:'rgba(255,255,255,1)',
				position: 'absolute',
				right: 0,
				bottom: 0,
				width: '100%',
				borderTop: '1px solid #e9e9e9',
				padding: '10px 16px',
				textAlign: 'right',
				zIndex: 1,
			}">
			<a-button :style="{ marginRight: '8px' }" @click="() => { $emit('cancel') }">
				关闭
			</a-button>
		</div>
        <data-auth-form
            ref="dataAuthForm"
            :visible="dataAuthFormVisible"
            :model="dataAuthFormModel"
            @ok="dataAuthFormOk"
            @cancel="dataAuthFormCancel"
        >

        </data-auth-form>
	</t-drawer>
</template>

<script>
    import dataAuthForm from "./dataAuthForm.vue";
	export default {
		props: {
			visible: {
				type: Boolean,
				default: () => false
			},
			loading: {
				type: Boolean,
				default: () => false
			}
		},
        components: {
            dataAuthForm
        },
        filters: {
            // subTableRuleFilter(val) {
            //     const subTableRuleMap = {
            //         menu: "菜单",
            //         urlNewWindows: "链接-新窗口",
            //         button: "按钮",
            //         urlInsidePage: "链接-内页",
            //         outerChain: "链接-外链",
            //         APP: "APP菜单",
            //     };
            //     return subTableRuleMap[val];
            // },
            // conditionalSymbolFilter(val) {
            //     const conditionalSymbolMap = {
            //         menu: "菜单",
            //         urlNewWindows: "链接-新窗口",
            //         button: "按钮",
            //         urlInsidePage: "链接-内页",
            //         outerChain: "链接-外链",
            //         APP: "APP菜单",
            //     };
            //     return conditionalSymbolMap[val];
            // },
            advancedMatchFilter(val) {
                const advancedMatch = {
                    eq: "等于",
                    ne: "不等于",
                    gt: "大于",
                    ge: "大于等于",
                    lt: "小于",
                    le: "小于等于",
                    isNull: "是null",
                    isNotNull: "不是null",
                    // sql: "自定义sql"
                };
                return advancedMatch[val];
            },
            conditionalContentFilter(val) {
                const conditionalContent = {
                    "@CurrentUserNameId": "当前登录用户账号",
                    "@CurrentUserName": "当前登录用户姓名",
                    "@CurrentOrgId": "当前登录用户组织机构",
                    "@CurrentRoleId": "当前登录用户角色",
                    "@CurrentSysDate": "当前系统日期",
                    "@CurrentSysTime": "当前登录时间"
                };
                return conditionalContent[val];
            },
        },
		data() {
			return {
                title: "数据权限",
				columns: [{
					title: "序号",
					align: "center",
					width: 55,
					langCode: "serialNo",
					scopedSlots: {
						customRender: "renderSerial",
					}
				},{
                    title: "并且/或者",
                    dataIndex: "subTableRule",
                    scopedSlots: {
                        customRender: "renderSubTableRule"
                    }
				},{
                    title: "方案名称",
                    width: 100,
                    dataIndex: "fieldName"
				},{
                    title: "所属字段",
                    width: 100,
                    dataIndex: "fieldEncoding"
				},{
                    title: "字段类型",
                    dataIndex: "conditionalSymbol",
                    scopedSlots: {
                        customRender: "renderConditionalSymbol"
                    }
				},{
                    title: "条件符号",
                    dataIndex: "advancedMatch",
                    scopedSlots: {
                        customRender: "renderAdvancedMatch"
                    }
				},{
                    title: "条件内容",
                    dataIndex: "conditionalContent",
                    width: 200,
                    scopedSlots: {
                        customRender: "renderConditionalContent"
                    }
				},{
                    title: "状态",
                    dataIndex: "permissionStatus",
                    scopedSlots: {
                        customRender: "renderPermissionStatus"
                    }
				},{
                    title: "排序",
                    dataIndex: "permissionSort",
				},{
                    title: "操作",
                    dataIndex: "action",
                    fixed: "right",
                    scopedSlots: {
                        customRender: "renderAction"
                    }
				}],
				dataSource: [],
                queryParam: {},
                dataAuthFormVisible: false,
                url: {
                    getPageSet: "/system/sysDataPermission/getListByMenuId",
                    save: "/system/sysDataPermission/save",
                    update: "/system/sysDataPermission/update",
                    deleteBatch: "/system/sysDataPermission/deleteBatch",
                    detail: "/system/sysDataPermission/getDetailByUuid"
                },
                dataAuthFormModel: null,
                menuAssembly: "",
                menuUuid: ""
			}
		},
		created() {
		
        },
        computed: {
			scrollXY() {
			  const tdHeight = this.dataSource?.length * 40 ?? 0;
			  return { y: 360, x: 1000};
			}
		},
		methods: {
            loadData(uuid,menuName,menuAssembly){
                this.title = "数据权限 -【" + menuName + "】";
                this.queryParam.menuUuid = uuid;
                this.menuAssembly = menuAssembly;
                this.menuUuid = uuid;
                this.getPageSet();
            },
            handleAdd(){
                this.dataAuthFormVisible = true;
            },
            handleEdit(record){
                this.dataAuthFormVisible = true;
                this.$post(this.url.detail, {
                    uuid: record.uuid
                }).then(res => {
                    if(res.statusCode === 200){
                        this.dataAuthFormModel = res.data
                    }
                })
			},
			handleSub(record){
				const that = this;
				that.$confirm({
					title: that.$ct("tips","提示"),
					content: that.$ct("deleteConfirmationPrompt","确定删除该数据吗？删除之后不可恢复！"),
					okText: that.$ct("confirm","确定"),
					cancelText: that.$ct("cancel","取消"),
					closable: true,
					icon: () => that.$createElement('a-icon', {
						props: {
							key: 'warning',
							type: 'exclamation-circle',
							twoToneColor: '#faad14'
						}
					}),
					onOk() {
					 that.$post(that.url.deleteBatch, {uuid: record.uuid}).then(res => {
						if(res.statusCode === 200){
							that.getPageSet();
							that.$message.success(res.message, 1.5)
						}else{
							that.$message.error(res.message, 1.5)
						}
					 })
					},
					onCancel() {}
				})
			},
            getPageSet(){
				this.$post(this.url.getPageSet, this.queryParam).then(res => {
					if(res.statusCode === 200){
						this.dataSource = res.data;
					}
				})
			},
            dataAuthFormOk(){
                const form = this.$refs.dataAuthForm.form
                this.confirmLoading = true
                form.validateFields((errors, values) => {
                    if (!errors) {
                        let url;
                        if (!values.uuid) {
                            url = this.url.save
                        } else {
                            url = this.url.update
                        }
                        values.menuUuid = this.menuUuid;
                        values.component = this.menuAssembly;
                        this.$post(url, values).then((res) => {
                            if (res.statusCode === 200) {
                                this.dataAuthFormVisible = false;
                                this.getPageSet();
                                this.$message.success(res.message, 1.5);
                            } else {
                                this.$message.error(res.message, 1.5)
                            }
                        }).finally(() => {
                            this.confirmLoading = false
                        })
                    } else {
                        this.confirmLoading = false
                    }
                })
            },
            dataAuthFormCancel(){
                this.dataAuthFormVisible = false;
            }
		}
	}
</script>

<style lang="less" scoped>
/deep/div[class^="ant-table-wrapper"] .ant-table .ant-table-tbody tr, div[class^="ant-table-wrapper"] .ant-table .ant-table-thead tr{
    height: 40px !important;
}
/deep/.ant-table-row-cell-ellipsis, .ant-table-row-cell-ellipsis .ant-table-column-title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/deep/.ant-table-tbody>tr>td, /deep/.ant-table-thead>tr>th{
    padding: 0 8px !important;
}
</style>
